<template>
  <div class="patient-box">
    <el-card>
      <template #header>
        <div class="patient-card-header">
          <span>就诊人管理</span>
          <el-button type="success" icon="User" @click="goAddUser"
            >添加就诊人</el-button
          >
        </div>
      </template>
      <div v-if="isAddUser">
        <AddUser
          :isAddUser="isAddUser"
          @changeIsAddUser="changeIsAddUser"
          :userId="userId"
          :idInfo="idInfo"
        ></AddUser>
      </div>
      <div v-else class="all-top-center-box">
        <el-card
          class="top-center-box"
          v-for="(item, index) in userInfo"
          :key="item.id"
        >
          <template #header>
            <div class="top-center-header">
              <div class="header-type-name">
                <span class="head-type">{{
                  item.isInsure == 1 ? "医保" : "自费"
                }}</span>
                <span class="head-name">{{ item.name }}</span>
              </div>
              <div>
                <el-button
                  type="primary"
                  icon="Edit"
                  circle
                  @click="edit(item.id, index)"
                />
                <el-popconfirm
                  :title="'你确定删除' + item.name + '吗？'"
                  @confirm="del(item.id)"
                >
                  <template #reference>
                    <el-button type="danger" icon="Delete" circle />
                  </template>
                </el-popconfirm>
              </div>
            </div>
          </template>
          <div class="user-info-item">
            <div>证件类型：{{ item.param.certificatesTypeString }}</div>
            <div>证件号码：{{ item.certificatesNo }}</div>
            <div>用户性别：{{ item.sex == 0 ? "女生" : "男生" }}</div>
            <div>出生日期：{{ item.birthdate }}</div>
            <div>手机号码：{{ item.phone }}</div>
            <div>婚姻状况：{{ item.isMarry == 1 ? "已婚" : "未婚" }}</div>
            <div>当前住址：{{ item.param.cityString }}</div>
            <div>详细住址：{{ item.paramfullAddress }}</div>
          </div>
        </el-card>
      </div>
    </el-card>
  </div>
</template>

<script>
import AddUser from "./components/addUser";
import { reqGetUser } from "@/api/HospitalPage";
import { reqDelUser } from "@/api/UserPage";
export default {
  name: "patientPage",
  data() {
    return {
      isAddUser: false,
      userInfo: [],
      userId: "",
      idInfo: {},
    };
  },
  methods: {
    async getUser() {
      let result = await reqGetUser();
      if (result.code == 200) {
        this.userInfo = result.data;
        if (this.$route.query.id) {
          this.userId = this.$route.query.id;
        }
      }
    },
    goAddUser() {
      this.isAddUser = true;
    },
    changeIsAddUser(val) {
      this.isAddUser = val;
      this.getUser();
    },
    async delUser(id) {
      let result = await reqDelUser(id);
      if (result.code == 200) {
        this.$message({
          type: "success",
          message: "删除成功",
        });
        this.getUser();
      }
    },
    del(val) {
      this.delUser(val);
    },
    edit(val, index) {
      this.userId = val;
      this.idInfo = this.userInfo[index];
      this.isAddUser = true;
    },
  },
  watch: {
    userId: {
      handler(newVal) {
        if (newVal) {
          let idInfo = this.userInfo.find((item) => {
            return item.id == newVal;
          });
          this.idInfo = idInfo;
        }
      },
      immediate: true,
    },
  },
  mounted() {
    this.getUser();
    // 组件初始化的时候，如果这个时候是路由跳转过来的，去判断
    if (this.$route.query.type == "add") {
      this.isAddUser = true;
    }
    if (this.$route.query.type == "edit") {
      this.isAddUser = true;
    }
  },
  components: {
    AddUser,
  },
};
</script>

<style lang="scss" scoped>
.patient-box {
  .patient-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .all-top-center-box {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    .top-center-box {
      width: 32%;
      margin-bottom: 10px;
      margin-right: 10px;
      position: relative;
      .top-center-header {
        display: flex;
        justify-content: space-around;
        align-items: center;
        .header-type-name {
          .head-type {
            padding: 2px;
            background-color: #f1f1f1;
            border-radius: 6px;
            margin-right: 3px;
            color: black;
            font-size: 12px;
          }
          .head-name {
            color: #7f7f7f;
          }
        }
      }
      .user-info-item {
        padding-left: 30px;
        box-sizing: border-box;
        div {
          height: 35px;
        }
      }
    }
  }
}
</style>
